<template>
	<view class="index">
		<view>
			<!-- 搜索框 -->
			<view class="cu-bar bg-white search bg-gradual-orange" style="width: 750upx;padding-top: 20upx;">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input placeholder="请输入商品名称" @tap="goSearch"/>
				</view>
				<view class="action">
					<text class="cuIcon-scan" style="font-size: 150%;"></text>
				</view>
			</view>

			<!-- tab -->
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" v-for="(item,index) in tabLists" :key="index" @click="tabClick(item,index)" :class="TabCur==index?'text-orange cur':''">
						{{item}}
					</view>
				</view>
			</scroll-view>

			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :circular="true" style="height: 250upx;" class="square-dot">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="swiperImg" :src="item.url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>

			<!-- 百亿补贴 -->
			<view class="tejia bg-white">
				<view class="flex align-center justify-between padding">
					<view class="flex align-center text-xl">
						<view class="text-bold">百亿补贴</view>
						<view class="text-bold cu-tag" style="margin-left: 20upx;">打包行动 官方补贴</view>
					</view>
				</view>
				<!-- 特价商品 -->
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex  justify-between" style="padding: 20upx 20upx 20upx 10upx;">
						<view v-for="(item,index) in tejiaList" :key="index" @tap="goDetails(item)">
							<view style="position: relative;" class="flex justify-center">
								<image style="width: 120upx;height: 120upx; border-radius: 20%; margin-left: 2upx;" :src='item.skuImg' mode=""></image>
								<view class="cu-tag sm bg-red" style="position: absolute;bottom: 0upx;">超特价</view>
							</view>
							<view style="color: red; text-align: center;">
								<text style="font: 80%;">￥{{item.skuPrice}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 商品列表 -->
			<view class="" style="margin-top: 10upx;">
				<view class="flex justify-around bg-white" v-for="(i,index) in goodsList" :key="index" style="padding: 20upx 20upx 20upx 20upx; 
				border-bottom: 0.8upx solid #e7e7e7;" @tap="goDetails(i)">
					<!-- 左部 -->
					<view style="width: 250upx">
						<image :src="i.skuImg" style="width: 250upx; height: 250upx;"></image>
					</view>
					<!-- 右部 -->
					<view style="width: 400upx; height: 350upx; flex-direction: column;">
						<view style="font-weight: bold; font-size: 30upx;">
							<text style="font-weight: 700;" v-html="i.skuTitle"></text>
						</view>
						<view class="cu-tag bg-brown radius" style="margin-top: 20upx;">{{i.catalogName}}</view>
						<view style="margin-bottom: 10upx;">
							<view style="font-size: 200%; margin-top: 20upx; margin-bottom: 20upx;">
								<text class="cu-tag sm bg-red radius">小编推荐</text>
								<text class="cu-tag sm bg-orange radius" style="margin-left: 20upx;">假一赔十</text>
							</view>
							<view style="font-size: 120%;" class="flex justify-between">
								<text style="color: #ff0000;"><text class="text-gray">价格：</text>￥{{i.skuPrice}}</text>
								<text class="text-gray">已买：{{i.saleCount}}</text>
							</view>
							<view style="width: 100%;height: 10upx;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultKeyword:'',
				bannerList: [], // 轮播图数据
				tabLists: ["全部","苹果", "橘子", "橙子", "草莓"],
				TabCur: 0,
				tejiaList: [] ,// 特价商品
				goodsList: [] ,// 底部商品展示数据
			}
		},
		onLoad() {
			this.getBanners() // 请求轮播图
			this.getTejia() // 请求特价商品
			this.getGoods() // 获取商品
			this.getUserInfo() // 获取当前用户
		},
		onPullDownRefresh() {
		    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		    console.log('refresh')
				
				this.getBanners() // 请求轮播图
				this.getTejia() // 请求特价商品
				this.getGoods() // 获取商品
				this.getUserInfo() // 获取当前用户
				
				uni.stopPullDownRefresh();  //停止下拉刷新动画
		},
		methods: {
			getUserInfo() {
				var that = this
				uni.getStorage({
				  key: 'userInfo',
				  success: function (res) {
				     uni.showToast({
				     	title:'欢迎'+res.data.username+'回来！',
				     	icon:"none"
				     })
				  },
				  fail:function(err) {
				  		uni.showToast({
				  			title:'未登录',
				  			icon:'none'
				  		})
				  }
				});
			},
			
			goDetails(item) {
				uni.navigateTo({
					url:`../goods/goodsDetail?skuId=${item.skuId}`
				})
			},
			
			
			getBanners() {
				this.bannerList = [{
					url: 'https://qxmall.oss-cn-shenzhen.aliyuncs.com/%E9%9D%92%E7%BC%83%E5%B1%85.png'
					},
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=994547934,4111776722&fm=26&gp=0.jpg'
					}
				];
			},
			async getTejia() {
				var res = await this.$request({
					url:'front/search/list.html',
					params:{},
					type:"GET"
				})
				if(res.data!=undefined){
					this.tejiaList = res.data.product
				}
			},
			async getGoods(){
				console.log('getGoods')
				var params = {}
				if(this.defaultKeyword != ''){
					params['keyword'] = this.defaultKeyword
				}
				let res = await this.$request({
					url: 'front/search/list.html',
					params: params,
					methods: 'GET'
				})
				if(res.data!=undefined){
					this.goodsList = res.data.product // 刷新页面
				}
			},
			// 点击tab项
			tabClick(item, index) {
				this.TabCur = index;
				console.log(index, item);
				this.defaultKeyword = item // 改变下部商品展示
				if(item == '全部'){
					this.defaultKeyword = ''
				}
				this.getGoods()
			},
			// 跳转搜索页面
			goSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>

<style>
	// 元素内部的边距
	.index {
		width: 750upx;
	}

	//swiper-item
	.swiperImg {
		width: 750upx;
		height: 300upx;
	}

	.zhongchu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		padding-right: 10upx;
		padding-left: 20upx;
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	.icon-father {
		border-top: 10upx solid #F0F0F0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.icon-item image {
		width: 100upx;
		height: 100upx;
	}

	.tejia {
		border-top: 10upx solid #F0F0F0;
		padding-left: 10upx;
		padding-top: 10upx;
		padding-right: 10upx;
	}
</style>
